<template>
  <div>
    <BasicTable @register="registerTable" >
      <template #toolbar>
        <a-button @click="expandAll" :title="t('展开全部')">
          <Icon icon="i-bi:chevron-double-down" /> {{ t('展开') }}
        </a-button>
        <a-button @click="collapseAll" :title="t('折叠全部')">
          <Icon icon="i-bi:chevron-double-up" /> {{ t('折叠') }}
        </a-button>
        <a-button type="primary" @click="handleForm(false, {})" :disabled="isDisabledAuth(Auth.saveDept)">
          <Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
        </a-button>
        <ExcelButton v-bind="excelProps" />

      </template>

       <template #firstColumn="{ record }">
        <!-- <span class="cursor-pointer" @click="expandCollapse(record)"> ( {{ record.deptCode }} ) </span> -->
        <a @click="handleForm(true, { id: record.id })">
          {{ record.deptName }}
        </a>
      </template>
    </BasicTable>
    <InputForm @register="registerInputForm" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" name="Dept" setup>
import { ref } from 'vue';
import { Auth } from '/@/enums/authEnum'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import { columns, searchFormSchema } from './data';
import * as apis from '/@/api/iam/dept';
import { useMessage } from '/@/hooks/web/useMessage';
import InputForm from './form.vue';
import { AvailableEnum, UploadBizType } from '/@/enums';
import { ExcelButton, ExcelProps } from "/@/components/Excel"

import { useRouter } from "vue-router"
import { Icon } from '/@/components/Icon';

const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const { isDisabledAuth } = usePermission()
const [registerInputForm, { openDrawer: openInputForm }] = useDrawer();

const actionColumn: BasicColumn = {
  width: 220,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      ifShow: record.sendStatus != 1,
      auth: Auth.deleteDept,
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      auth: Auth.updateDept,
      onClick: handleForm.bind(null, true, record),
    },
    {
      label: '添加下级',
      auth: Auth.saveDept,
      onClick: handleForm.bind(null, false, { parentId: record.id }),
    },
    {
      label: "停用",
      color: "error",
      ifShow: record.status == AvailableEnum.NORMAL,
      // auth: 'sys:area:updateStatus',
      popConfirm: {
        title: "确定停用吗?",
        confirm: handleUpdateStatus.bind(null, record, AvailableEnum.DISABLE),
      },
    },
    {
      label: "启用",
      ifShow: record.status == AvailableEnum.DISABLE,
      popConfirm: {
        title: "确定启用吗?",
        confirm: handleUpdateStatus.bind(null, record, AvailableEnum.NORMAL),
      },
    }
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const excelProps = ref<ExcelProps>({
  bizType: UploadBizType.Dept,
  exportConfig: {
    name: "部门",
    url: apis.exportDeptUrl,
    params: {}
  },
  importConfig: {
    url: apis.importDeptUrl,
    name: "导入模板",
    showModal: true,
    success: (file) => reload(),
    tips: '仅允许导入“xls”或“xlsx”格式文件！'
  },
})

const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '部门',
  api: apis.listDeptTree,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  afterFetch: () => {
    expandAll()
  },
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    labelWidth: 90,
    schemas: searchFormSchema,
    showResetButton: false,
  },
  actionColumn,
  showTableSetting: true,
  useSearchForm: true,
  isTreeTable: true,
  pagination: false,
  canResize: true,
  rowKey: 'id'
})

const handleForm = (isUpdate, record) => openInputForm(true, { record, isUpdate });
const handleDelete = async (record) => await apis.deleteDept({ id: record.id }, reload)
const handleSuccess = () => reload()
const handleUpdateStatus = async (record, status) => {
  await apis.saveOrUpdateDept({ id: record.id, status }, true)
  createMessage.success('更新成功')
  reload()
}
</script>
